<script setup>

    import {onMounted, ref} from 'vue'
    import {getDateTimeString} from '@/utils/date.js'
    import {workOrderVerifyService} from '@/api/workOrder.js'
    import { ElMessage, ElMessageBox } from 'element-plus';
    import { Picture } from '@element-plus/icons-vue'

    const {workOrderData} = defineProps({
    workOrderData: {
        type: Object,
        required: true
    }
    })

    const emit = defineEmits(['close'])

    const verifyData = ref({
        id: null,
        isApproved: null,
        comment: ''
    })

    const canVerify = ref(false)


    console.log(workOrderData.repairRecords)

    const verify = async () => {
        let result = await workOrderVerifyService(verifyData.value)
        ElMessage.success(result.data);
        emit('close')
    }
    
    const approveWorkOrder = () =>{
        ElMessageBox.confirm(
            '要通过该审核吗?',
            'Warning',
            {
                confirmButtonText: '确认',
                cancelButtonText: '取消',
                type: 'warning',
            }).then( async () => {
                verifyData.value.isApproved = 'yes'
                verify()
        }).catch(() => {
            ElMessage({
                type: 'info',
                message: '已取消',
            })
        })
    }

    const rejectWorkOrder = () =>{
        ElMessageBox.confirm(
            '要打回该审核吗?',
            'Warning',
            {
                confirmButtonText: '确认',
                cancelButtonText: '取消',
                type: 'warning',
            }).then( async () => {
                verifyData.value.isApproved = 'no'
                verify()
        }).catch(() => {
            ElMessage({
                type: 'info',
                message: '已取消',
            })
        })
    }
    
    const timelineData = ref([
    ])


    const getTimelineData = () =>{
    timelineData.value.push({
        content: '运维报修',
        name: workOrderData.sedName,
        timestamp: workOrderData.timeSend,
        type: (workOrderData.status === 'pending') ? 'primary' : ''
    })
    timelineData.value.push({
        content: '维修人员接单',
        name: workOrderData.repName,
        timestamp: workOrderData.timeAccept,
        type: (workOrderData.status === 'repairing') ? 'primary' : ''
    })
    timelineData.value.push({
        content: '提交审核',
        name: workOrderData.jugName,
        timestamp: workOrderData.timeProcess,
        type: (workOrderData.status === 'processing') ? 'primary' : ''
    })
    timelineData.value.push({
        content: '工单完成',
        timestamp: workOrderData.timeCompleted,
        color: (workOrderData.status === 'completed') ? '#0bbd87' : ''
    })
}

    onMounted(()=>{
        verifyData.value.id = workOrderData.id
        verifyData.value.comment = workOrderData.commentUser
        canVerify.value = workOrderData.status === 'processing'
        console.log(canVerify.value)
        getTimelineData()
    })

</script>


<template>
    <div class="container">
        <el-card class="work-order-info">
                <template #header>
                    <div class="header">
                        <span>工单信息</span>
                    </div>
                </template>
                
                <div class="work-order-info-body">
                    <div class="work-order-info-timeline">
                        <el-timeline>
                            <el-timeline-item
                            v-for="(item, index) in timelineData"
                            :key="index"
                            :icon="item.icon"
                            :type="item.type"
                            :color="item.color"
                            :size="item.size"
                            :hollow="item.hollow"
                            :timestamp="item.timestamp"
                            >
                            {{ item.content }} <span> {{ item.name }}</span>
                            </el-timeline-item>
                        </el-timeline>
                    </div>

                    <div class=" work-order-info-data">
                        <div class="work-order-info-item"><span>工单ID: </span>{{ workOrderData.id }}</div>
                        <div class="work-order-info-item"><span>设备名称: </span>{{ workOrderData.deviceName }}</div>
                        <div class="work-order-info-item"><span>工单类型: </span>{{ workOrderData.typeName }}</div>
                        <div class="work-order-info-item"><span>工单状态: </span>{{ workOrderData.statusName }}</div>
                        <div class="work-order-info-item"><span>工单描述: </span>{{ workOrderData.commentOrder }}</div>
                    </div>
                </div>
            </el-card>

            <el-card class="repair-record-info">
                <template #header>
                    <div class="header">
                        <span>维修项目</span>
                    </div>
                </template>
                <el-empty v-if="workOrderData.repairRecords.length === 0" description="当前还没有维修项目" />
                <div class="repair-record-item" v-for="item,index in workOrderData.repairRecords">
                    <el-descriptions :title="'维修项目 ' + (index + 1) " class="repair-record-item-data" 
                    direction="vertical"
                    :column="4"
                    border>
                        <el-descriptions-item label="设备ID">{{ item.deviceId }}</el-descriptions-item>
                        <el-descriptions-item label="维修类型">{{ item.repairType ? item.repairType.name : '未知' }}</el-descriptions-item>
                        <el-descriptions-item label="材料费(元)">{{ item.repairType ? item.repairType.materialCost : '未知' }}</el-descriptions-item>
                        <el-descriptions-item label="人工费(元)">{{ item.repairType ? item.repairType.repairCost : '未知' }}</el-descriptions-item>
                        <el-descriptions-item label="照片">
                            <el-image :src="item.image"  
                            style="width: 96px; height: 96px; display: flex; align-items: center; justify-content: center;" 
                            :preview-src-list="[item.image]"
                            :initial-index="0">
                                <template #error>
                                    <div class="image-slot">
                                        <el-icon size="48px" color="#eee"><Picture /></el-icon>
                                    </div>
                                </template>
                            </el-image>
                        </el-descriptions-item>
                        <el-descriptions-item label="描述" align="left">{{ item.description }}</el-descriptions-item>
                    </el-descriptions>
                </div>
                <div class="work-order-info" style="text-align: right;"><span>工单总价: </span>{{ workOrderData.money }} 元</div>
            </el-card>

            <el-card class="work-order-operations">
                <template #header>
                    <div class="header">
                        <span>审核意见                                                                                                                                                                                                                                  </span>
                    </div>
                </template>
                <el-input placeholder="输入审核意见" type="textarea" v-model="verifyData.comment" :disabled="!canVerify"></el-input>
                <div class="work-order-verify-buttons">
                    <el-button @click="approveWorkOrder" type="primary" :disabled="!canVerify">通过</el-button>
                    <el-button @click="rejectWorkOrder" type="danger" :disabled="!canVerify">打回</el-button>
                </div>
            </el-card>
       
    </div>
</template>

<style scoped>

    .work-order-info-data {
       margin-bottom: 1px;
       padding: 1px 64px;
    }

    .work-order-info-timeline {
       margin-bottom: 1px;
       padding: 1px 0;
    }

    .work-order-info-item {
       padding: 12px 0;
    }

    .work-order-info-body {
        display: flex;
        flex-direction: row;
    }

    .repair-record-sum {
        color: #888
    }

    .repair-record-info {
       padding: 12px;
       margin: 32px 0;
    }

    .work-order-info span {
        color: #888;
    }

    .repair-record-item {
        padding: 5px 0;
        margin: 12px 0;
    }

    .repair-record-item-data {
        margin: 12px 0;
    }

    .repair-record-item-data span {
        color: #888;
    }

    .work-order-operations{
        display: flex;
        flex-direction: column;
    }

    .work-order-verify-buttons {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        margin: 32px 64px;
    }


</style>